'use strict';

var React = require('react/addons');
var Router = require('react-router'); 
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var PanelRouterAction = require('../../actions/panelRouter');


var HeaderComponent = React.createClass({
  getInitialState : function(){
    return {
        userSwitch : true,
        isopen : false
    };
  },
  handleOpen : function(){
    var off = !this.state.isopen;
    this.setState({isopen : off});
  },
  handleMsg : function(){
    this.handleOpen();
    var params = {
                  userId:'12333',
                  tabTitle:'我举报的问题',
                  inputTitle:'请选择举报类型'
            };
      PanelRouterAction.PANEL_ROUTER_NOTICE(params);
  },
  render: function() {

    var dropdownMenu = 
            this.state.isopen ? 
                  <ul className="do-head-dropdown-menu">
                    <li>
                      <a href="javascript:;" onClick={ this.handleMsg }>
                         查看新提问 <span className="badge badge-danger">3</span>
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;" onClick={ this.handleMsg }>
                         查看新追问  <span className="badge badge-danger">3</span>
                      </a>
                    </li>
                    <li>
                      <a href="javascript:;" onClick={ this.handleMsg }>
                         查看新通知  <span className="badge badge-danger">3</span>
                      </a>
                    </li>
                    <span className="do-arr"></span>
                  </ul> : [];

    return (
      /* jshint ignore:start */
        <div className="do-nav">
            <a className="do-logo">
                <img src="/images/logo.png" alt="Logo" className="do-logo-img" />
                <span className="do-logo-txt">风信子医生诊室</span>
            </a>
            <ul className="do-nav-head" >
              <li>
                <a href="javascript:;" className="do-head-dropdown-toggle" onClick={ this.handleOpen }><i className="fa fa-envelope-o"></i> 消息 <span className="badge">9</span></a>
                <ReactCSSTransitionGroup transitionName="do-fade">
                  { dropdownMenu }
                </ReactCSSTransitionGroup>
              </li>
              <li><a href="javascript:;" className="do-head-dropdown-toggle"><i className="fa fa-sign-in"></i> 退出</a></li>
            </ul>
        </div>
      /* jshint ignore:end */
    );
  }
});

module.exports = HeaderComponent;